<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>实时矢量瓦片</title>
    <script src="./static/libs/include-mapboxgl-local.js"></script>
    <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
    <style>
        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .mapboxgl-popup {
            max-width: fit-content !important;
        }

        .table-popup-wrapper {
            width: fit-content;
        }
    </style>
</head>

<body>
    <div id="map">
        <div id="mouse-position">
        </div>
    </div>
    <script>
        mapboxgl.accessToken = 'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA';
        var tiandituKey = 'f5347cab4b28410a6e8ba5143e3d5a35';
        var vecsrc = {
            //来源类型为栅格瓦片
            type: 'raster',
            tiles: [
                //来源请求地址，请求天地图提供的全球矢量地图WMTS服务
                'http://t' +
                Math.round(Math.random() * 7) +
                '.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles' +
                '&TILECOL=' +
                '{x}' +
                '&TILEROW=' +
                '{y}' +
                '&TILEMATRIX=' +
                '{z}' +
                '&tk=' +
                tiandituKey
            ],
            //栅格瓦片的分辨率
            tileSize: 256
        };
        var cvasrc = {
            //来源类型为栅格瓦片
            type: 'raster',
            tiles: [
                //来源请求地址，请求天地图提供的全球矢量中文注记WMTS服务
                'http://t' +
                Math.round(Math.random() * 7) +
                '.tianditu.gov.cn/cva_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cva&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles' +
                '&TILECOL=' +
                '{x}' +
                '&TILEROW=' +
                '{y}' +
                '&TILEMATRIX=' +
                '{z}' +
                '&tk=' +
                tiandituKey
            ],
            //栅格瓦片的分辨率
            tileSize: 256
        };
        var popup = new mapboxgl.Popup({ closeOnClick: false });
        var map = new mapboxgl.Map({
            container: 'map',
            crs: 'EPSG:4326', //经纬度一定要设置crs参数
            maxBounds: [
                [-180, -90],
                [180, 90]
            ],
            style: {
                //设置版本号，一定要设置
                version: 8,
                //添加来源
                sources: {
                    vecsrc: vecsrc,
                    cvasrc: cvasrc
                },
                //设置加载并显示来源的图层信息
                layers: [
                    {
                        //图层id，要保证唯一性
                        id: 'vecsrc',
                        //图层类型
                        type: 'raster',
                        //连接图层来源
                        source: 'vecsrc',
                        //图层最小缩放级数
                        minzoom: 0,
                        //图层最大缩放级数
                        maxzoom: 22
                    },
                    {
                        //图层id，要保证唯一性
                        id: 'cvasrc',
                        //图层类型
                        type: 'raster',
                        //连接图层来源
                        source: 'cvasrc',
                        //图层最小缩放级数
                        minzoom: 0,
                        //图层最大缩放级数
                        maxzoom: 22
                    }
                ]
            },
            zoom: 10,
            pitch: 45,
            center: [121.4693, 31.12307]
        });
        //注册鼠标移动事件
        map.on('mousemove', function (e) {
            document.getElementById('mouse-position').innerHTML = "经度：" + e.lngLat.lng.toFixed(2) + "，纬度：" + e.lngLat.lat.toFixed(2);
        });
        var vm = this;

        map.on('load', () => {
            vm.query();
        });

        function query() {
            const url =
                'http://192.168.96.101:9091/pgsql/vectortileservice_dzy?' +
                'libName=bigdata03&srvName=bigdata03.mpf26126&version=1' +
                '&TileMatrix={z}&TileRow={y}&TileCol={x}&keepField=lat';
            /* var param = {
                networkProtocol: 'http',
                ip: '192.168.96.101',
                port: 9091,
                path: 'bigdata03/bigdata03/', // 这里的最后一个mpf24091是mapgis平台中的图层名',
                version: '1.0',
                tileMatrix: '{z}',
                tileRow: '{y}',
                tileCol: '{x}'
            };

            var vectortile = new Zondy.DataStore.PostGIS.PostgisVectorTileService(param);
            var url = vectortile.getWmtsUrl(); */
            var sourceId = 'query-source';
            var layerId = 'select_layer';

            map.addSource(sourceId, {
                type: 'vector',
                tiles: [url],
                mapgisOffset: 1
            });
            map.addLayer({
                id: layerId,
                type: 'circle',
                source: sourceId,
                'source-layer': 'bigdata03.mpf26126',
                paint: {
                    'circle-radius': 12,
                    'circle-color': '#B42222',
                    'circle-stroke-width': 3,
                    'circle-stroke-color': '#ffffff'
                },
                filter: ['==', '$type', 'Point']
            });
        }
    </script>
</body>

</html>